<template>
	<div class="watersDataInput" v-loading="watersDataInputLoading">
		<div class="title">企业基本信息</div>
    <el-form 
      ref="inputForm"
      size="mini"
      :model="inputForm"
      label-width="110px"
      class="inputForm"
      :rules="inputFormRules"
    >
      <el-form-item label="企业名称" style="width: 40%;" prop="pollutantName">
        <el-input v-model="inputForm.pollutantName" :disabled="supplementFlag" placeholder="请输入企业名称"></el-input>
      </el-form-item>
      <el-form-item label="企业编号" style="width: 40%;" prop="pollutantNumbering">
        <el-input v-model="inputForm.pollutantNumbering" placeholder="请输入企业编号"></el-input>
      </el-form-item>
      <el-form-item label="污水排放量" style="width: 40%;" prop="numWater">
        <el-input v-model.number="inputForm.numWater" placeholder="请输入污水排放量" type="number">
          <template slot="append">t/d</template>
        </el-input>
      </el-form-item>
      <el-form-item label="污水排放频次" style="width: 40%;" prop="rateWater">
        <el-input v-model="inputForm.rateWater" placeholder="请输入污水排放频次"></el-input>
      </el-form-item>
      <el-form-item label="污染行业类型" style="width: 40%;" prop="sourceType">
        <el-select v-model="inputForm.sourceType" placeholder="请输入污染源行业类型" style="width:100%">
          <el-option v-for="(item, index) of pollutionSourceType" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="环保负责人" style="width: 40%;" prop="personName">
        <el-input v-model="inputForm.personName" placeholder="请输入环保负责人"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" style="width: 40%;" prop="phone">
        <el-input v-model="inputForm.phone" placeholder="请输入联系方式"></el-input>
      </el-form-item>
    <!-- </el-form> -->
    <!-- <el-form 
      ref="inputForm2"
      size="mini"
      :model="inputForm"
      label-width="110px"
    > -->
      <el-form-item label="相关联站点 （可多选）" prop="waterStation" style="border-top: 1px dashed #e2e3e8;padding-top:15px;">
        <el-checkbox-group v-model="inputForm.waterStation">
          <p v-for="(item, index) of stationList" :key="index">
            <el-checkbox :label="item"></el-checkbox>
          </p>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="录入人" style="width: 40%;" prop="enteringPerson">
        <el-input v-model="inputForm.enteringPerson" placeholder="请输入录入人" disabled></el-input>
      </el-form-item>
      <el-form-item label-width="45px">
        <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit('inputForm')">确定</el-button>
      </el-form-item>
    </el-form>
	</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'watersDataInput',
  data () {
    let validateNegative = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('数值不能为负数'));
      }else {
        callback()
      }
    }
    return {
      msg: 'hello watersDataInput!',
      watersDataInputLoading: false,
      factorsList: [
        {name: 'pH', val: 'ph'},
        {name: '氨氮', val: '氨氮'},
        {name: '总氮', val: '总氮'},
        {name: '总磷', val: '总磷'},
        {name: '总铜', val: '总铜'},
        {name: '总镍', val: '总镍'},
        {name: '总铬', val: '总铬'},
        {name: '总氰化物', val: '总氰化物'},
      ],
      inputForm: {
        pollutantName: '',
        pollutantNumbering: '',
        numWater: '',
        rateWater: '',
        sourceType: '',
        personName: '',
        phone: '',
        waterStation: [],
        enteringPerson: ''
      },
      inputFormRules: {
        pollutantName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
        ],
        pollutantNumbering: [
          { required: true, message: '请输入企业编号', trigger: 'blur' },
        ],
        numWater: [
          { required: true, message: '请输入污水排放量', trigger: 'blur' },
          { validator: validateNegative, trigger: 'blur' },
          { type: 'number', message: '污水排放量必须为数字值'}
        ],
        rateWater: [
          { required: true, message: '请输入污水排放频次', trigger: 'blur' },
        ],
        sourceType: [
          { required: true, message: '请输入污染源行业类型', trigger: 'change' }
        ],
        personName: [
          { required: true, message: '请输入环保负责人', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
        ],
        waterStation: [
          { type: 'array', required: true, message: '请选择关联水站', trigger: 'change' }
        ],
        enteringPerson: [
          { required: true, message: '请输入录入人', trigger: 'blur' },
        ],
      },
      supplementFlag: false,
      supplementId: null,
		}
  },
  methods: {
    ...mapActions([
      'fetchWaterPollutionSourceType',
      'postWaterPollutionAdded',
      'postWaterPollutionSupplement'
    ]),
    onSubmit(formName) {
      let inputForm = this.inputForm
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          this.watersDataInputLoading = true
          let result
          if(!this.supplementFlag) {
            result = await this.postWaterPollutionAdded(this.inputForm)
          }else {
            result = await this.postWaterPollutionSupplement({
              enterprise: inputForm.sourceType,
              id: this.supplementId,
              name: inputForm.pollutantName,
              numWater: inputForm.numWater,
              numbering: inputForm.pollutantNumbering,
              personName: inputForm.personName,
              phone: inputForm.phone,
              rateWater: inputForm.rateWater,
              waterStation: inputForm.waterStation,
              enteringPerson: inputForm.enteringPerson,
            })
          }
          if(result.message !== 'success') {
            this.$notify.warning({
              title: '警告',
              message: result.info,
            })
            this.watersDataInputLoading = false
            return
          }
          this.$notify.success({
            title: '成功',
            message: '新增企业档案成功',
          })
          this.$router.push('/waters/dataList')
        }else {
          return false;
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      userInfo: 'getUserInfo',
      pollutionSourceType: 'getPollutionSourceType',
    })
  },
  async created() {
    this.watersDataInputLoading = true
    await this.fetchWaterPollutionSourceType()

    this.inputForm.enteringPerson = this.userInfo.user.username
    if(this.$route.query.id && this.$route.query.name) {
      this.supplementFlag = true
      this.supplementId = this.$route.query.id
      this.inputForm.pollutantName = this.$route.query.name
    }

    this.watersDataInputLoading = false
  }
}
</script>
<style scoped>
.watersDataInput {
  position: relative;
  background: #fff;
  min-height: 100%;
  padding: 0 20px;
}
.watersDataInput .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.watersDataInput .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.watersDataInput .mhr {
  position: absolute;
}
</style>